import Choice from './time-dialog.html';
import './time-dialog.scss';

import Util from '../util/util.js';
/**
 * Created with JetBrainsWebStorm.
 * User: xiongpeng
 * Date: 2017/12/13 0013
 * Time: 下午 3:49
 * Desc: 时间组修改弹窗组件
 *
 * var timeDialog = new TimeDialog({
 *    dateGroup: { //日期组
 *        title: '预约时间',
 *        startDate: '',
 *        endDate: ''
 *    },
 *    timeGroup: { //时间组
 *        title: '预约时间段',
 *        startDate: '',
 *        endDate: ''
 *    },
 *    complete:function(){} //回调
 * });
 *
 * timeDialog.show(); //调用show方法显示弹窗
 */
export default function TimeDialog(options) {
    var baseOption = {
        dialogTitle: '选择时间',
        dateGroup: {
            title: '预约时间',
            startDate: '',
            endDate: ''
        },
        timeGroup: {
            title: '预约时间段',
            startTime: '',
            endTime: ''
        },
        complete:function(){}
    };

    options = $.extend(baseOption,options);

    $("body").append(Choice( baseOption ));

    Util.flatPicker($("input[name='startDate_change']"),$("input[name='endDate_change']"));
    $("input[name='startTime_change'],input[name='endTime_change']").flatpickr({
        dateFormat: "H:i:S"
    });

    $(".modal.time .close").on("click",() => {
        this.hide();
    });

    var v = $('#choice_time').easyform();
    v.success = (ef) => {//验证成功
        var serializeObj = this.serializeObject($('#choice_time'));

        options.complete(serializeObj);
        this.hide();
    }

    this.show = function(){
        $('.modal.time').show();
    }

    this.hide = function(){
        $('.modal.time').fadeOut(function() {
            $(this).remove();
        });
    }

    //序列化表单中的条件，如果未输入则为空
    this.serializeObject = function($form){
        var formArr = $form.serializeArray(),serializeObj = {};
        for(var i in formArr){
            serializeObj[formArr[i].name] = formArr[i].value;
        }
        return serializeObj;
    }
}